<template>
  <el-table :data="state.tableData" style="width: 100%">
    <el-table-column fixed prop="fid" label="id" width="150" />
    <el-table-column prop="fgsid" label="公司id" width="120" />
    <el-table-column prop="fpfmc" label="评分表名称" width="120" />
    <el-table-column prop="fzt" label="状态" width="120" >
      <template v-slot:default="{row}">
        <span v-if="row.fzt === 0">失效</span>
        <span v-else-if="row.fzt === 1">有效</span>
      </template>
    </el-table-column>
    <el-table-column prop="createtime" label="创建时间" width="150" />
    <el-table-column prop="modifytime" label="修改时间" width="150" />
    <el-table-column prop="creator" label="创建人" width="120" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="{ row }">
        <el-button link type="primary" size="small" @click="selectByname(row)">
         评分表详情
        </el-button>
        <el-button link type="primary" size="small">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="state.DetailVisible" width="1400px" title="考核表明细">


      <el-table :data="state.tableData2" :span-method="arraySpanMethod"
                border style="width: 100%">
        <el-table-column label="考核要求:态度友善、耐心聆听、产品知识熟悉、问题处理妥当、化解冲突">

          <el-table-column  label="考核日期:" width="120" >
            <el-table-column prop="id" label="序号" width="120" />
            <el-table-column prop="f" label="评估项目" width="120" />
            <el-table-column prop="s" label="描述" width="120" />
            <el-table-column prop="score" label="分值" width="120" />
          </el-table-column>
          <el-table-column  label="客服:" width="120" >
            <el-table-column prop="ms" label="评估要点" width="120" />
          </el-table-column>
          <el-table-column label="考核人">
            <el-table-column prop="state" label="打分" width="120" />
            <el-table-column prop="city" label="备注" width="120" />
          </el-table-column>

        </el-table-column>
      </el-table>

<!--    <el-table :data="state.tableData" style="width: 100%">-->
<!--      <el-table-column fixed prop="fid" label="id" width="150" />-->
<!--      <el-table-column prop="fgsid" label="公司id" width="120" />-->
<!--      <el-table-column prop="fpfmc" label="评分表名称" width="120" />-->
<!--      <el-table-column prop="fzt" label="状态" width="120" >-->
<!--        <template v-slot:default="{row}">-->
<!--          <span v-if="row.fzt === 0">失效</span>-->
<!--          <span v-else-if="row.fzt === 1">有效</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="createtime" label="创建时间" width="150" />-->
<!--      <el-table-column prop="modifytime" label="修改时间" width="150" />-->
<!--      <el-table-column prop="creator" label="创建人" width="120" />-->
<!--      <el-table-column fixed="right" label="操作" min-width="120">-->
<!--        <template #default>-->
<!--          <el-button link type="primary" size="small" @click="handleClick">-->
<!--            评分表详情-->
<!--          </el-button>-->
<!--          <el-button link type="primary" size="small">Edit</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive,ref } from 'vue'
import { onMounted } from 'vue'
import request from "@/utils/request";
const count=ref(0);
const arraySpanMethod = ({
                           row,
                           column,
                           rowIndex,
                           columnIndex,
                         }) => {
  if (columnIndex === 0|| columnIndex === 1) {
    if (rowIndex % 6 === 0) {

      return {
        rowspan: 6,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
  if(columnIndex === 2){
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
  if (columnIndex === 5|| columnIndex === 6) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}

const state=reactive({
  tableData:[],
  tableData2:[],
  DetailVisible:false
})
const load=async ()=>{
  await request.post('/scoreManage/list').then((res)=>{
    state.tableData=res.data;
  })
}
const selectByname=async (row)=>{
  state.DetailVisible=true
  let paramas=new URLSearchParams();
  paramas.append("name",row.fpfmc)
  await request.post('/scoreManage/selectByName',paramas).then((res)=>{
    res.data.forEach(item=>{
      if( Number(item.id)%6===1){
        item.id=++count.value;
      }
    })
    state.tableData2=res.data;
  })
}
onMounted(()=>{
  load();
})

</script>
<style>

</style>